<template>
	<view class="personOrcompanyDetail">
		<view class="mT30">
			<view class="relative topCompany  radius20 mL15 pL15 pB15 pR15 pT15 mR15"
				:style="`background:url(${resources.companyBg})`">
				<view class="flex alg-center jst-between">
					<u-image :width="130" :height="130" class="headerImg flex alg-center jst-center"
						v-if="info?.comOrUserProfile" :src="xf.getImgUrl(info?.comOrUserProfile)" mode="widthFix"
						border-radius="20"></u-image>
					<image class="headerImg" v-else :src="resources.defaultHeader"></image>
					<view class="flex alg-center callBox" @click="phoneLink">
						<image class="callPhoneImg" :src="resources.bluePhone" mode=""></image>
						<text class="u-blue font12 bold">打电话</text>
					</view>
				</view>
				<view>
					<block v-if="isPerson==1">
						<view class="font20  bold">{{info?.comName}}</view>
						<view class="flex jst-between alg-center mT5">
							<view class="flex alg-center ">
								<view class="bg-ea radius10 pL5 pR5 line20">
									<image v-if="info?.izAuthenticationText==1" class="w24" :src="resources.qyrzLogo"
										mode=""></image>
									<text class="font13 mL5 u-blue">企业认证</text>
								</view>
								<image class="w24 mL15" :src="resources.star" mode=""></image>
								<view class="font15 u-yellow mL5">{{info?.comScore||0}}</view>
							</view>

						</view>
					</block>
					<block v-else>
						<view class="flex jst-between alg-center">
							<view class="font20 mT5 bold">{{info?.realName}}</view>

						</view>
						<view class="flex alg-center ">
							<view class="bg-org radius10 pL5 pR5 line20">
								<image class="w24" :src="resources.grrzLogo" mode=""></image>
								<text class="font13 mL5 u-org">个人认证</text>
							</view>
							<image class="w24 mL15" :src="resources.star" mode=""></image>
							<view class="font15 u-yellow mL5">{{info?.userScore||0}}</view>
						</view>


					</block>

				</view>



				<view class="flex jst-around topInfo mT10">
					<view class="flex jst-between flex-v alg-center">
						<view class="t-center u-6 font13">认证</view>
						<view v-if="isPerson==1" class="t-center mT5 font16">{{info?.izAuthenticationText}}</view>
						<view v-else class="t-center mT5 font16">{{info?.authenticationStateText}}</view>
					</view>
					<view class="flex jst-between flex-v alg-center">
						<view class="t-center u-6 font13">结算准时率</view>
						<view class="t-center mT5 font16 u-org">
							<text class="font20 bold">{{info?.settlement}}</text>

						</view>
					</view>
					<block v-if="isPerson!=1">
						<view class="flex jst-between flex-v alg-center">
							<view class="t-center u-6 font13">完成订单</view>
							<view class="t-center mT5 font16 u-blue">
								<text class="font20 bold">{{info?.workPositionNum}}</text>
								<text class="font13 bold">个</text>
							</view>
						</view>
					</block>
					<block v-else>
						<view class="flex jst-between flex-v alg-center">
							<view class="t-center u-6 font13">发布过职位</view>
							<view class="t-center mT5 font16 u-blue">
								<text class="font20 bold">{{info?.releasePositionNum}}</text>
								<text class="font13 bold">个</text>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		<view class="mL15 mR15 mT10">
			<u-tabs :bold="false" :class="'selTab'" item-width="33%" :gutter="0" :bar-height="8" :font-size="40"
				:bg-color="'transparent'" :current="currentTab" @change="changeTab" :list="tabLis" lineWidth="30"
				lineColor="#3291F8" :active-item-style="{
					             color: '#303133',
					             fontWeight: 'bold',
					             transform: 'scale(1.05)'
					         }" :inactive-color="'#999'">
			</u-tabs>
			<!-- 企业基本信息开始 -->
			<view v-show="currentTab==0" class="mT15">
				<!-- isperson=1 是公司，2是个人 -->
				<block v-if="isPerson==1">
					<view>
						<view class="font18 bold mB10">公司介绍</view>
						<view class=" radius20 bgf  pT15 pB15 pL12 pR12">
							<view class="font15 line24">
								{{info?.comIntroduction}}
							</view>
							<map class='map' :latitude="info?.comLatitude" :longitude="info?.comLongitude" :scale='16'>
								<cover-view class="imgMapBg" v-show="showMapTip">
									<cover-view class="arrowDown font12 t-center">{{info?.comName}}</cover-view>
								</cover-view>
							</map>
							<view class="mT10">
								<view class="flex alg-center pT10 jst-between">
									<view class="flex alg-center">
										<u-image :width="32" :height="32" :src="resources.posIcon" mode=""></u-image>
										<text
											class="mL5 font15 u-3">{{info?.provinceName}}-{{info?.cityName}}-{{info?.areaName}}</text>
									</view>
									<view @click.stop="openMap">
										<u-image :width="48" :height="48" :src="resources.route" mode=""></u-image>
									</view>
								</view>
								<view class="flex alg-center jst-between mT5">
									<view class="u-8bd font13 pL20 w80">
										{{info?.comBelongAddress}}
									</view>
									<view class="u-6 font13">
										{{info?.distance}}
									</view>
								</view>
							</view>
						</view>

					</view>
					<view class="mT15">
						<view class="font18 bold mB10">公司风貌</view>
						<view class=" radius20 bgf  pT15 pB15 pL12 pR12">
							<view class="flex  flex-wrap " v-if="info?.comAppearance">
								<image class="companyPic" v-for="(item,i) in xf.getArr(info?.comAppearance)"
									:src="xf.getImgUrl(item)" mode=""></image>
							</view>
							<view v-else>
								<xfNoData :paddingTop="100"></xfNoData>
							</view>

						</view>

					</view>
					<view class="mT15">
						<view class="u-3 font18 bold mB15">工商信息</view>
						<view class="radius20 bgf pT15 pB15 pL15 pR15">
							<view class="font13 u-9">公司名称</view>
							<view class="u-3 font15 mT5">{{info?.comName}}</view>
							<view class="font13 u-9 mT10">法人代表人</view>
							<view class="u-3 font15 mT5">{{info?.legalPerson}}</view>
							<view class="font13 u-9 mT10">统一信用编码</view>
							<view class="u-3 font15 mT5">{{info?.comCode}}</view>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="mT15">
						<view class="u-3 font18 bold mB15">个人信息</view>
						<view class="radius20 bgf pT15 pB15 pL15 pR15">
							<view class="font13 u-9">真实姓名</view>
							<view class="u-3 font15 mT5">{{info?.realName}}</view>
							<view class="font13 u-9 mT10">联系方式</view>
							<view class="u-3 font15 mT5">{{info?.userPhoneNo}}</view>
							<view class="font13 u-9 mT10">地址</view>
							<view class="u-3 font15 mT5">{{info?.homeAddress}}</view>
							<view class="font13 u-9 mT10">自我介绍</view>
							<view class="u-3 font15 mT5">{{info?.introduce}}</view>

						</view>
					</view>
				</block>
			</view>
			<!-- 企业基本信息结束 -->
			<!-- 企业评价开始 -->
			<view v-show="currentTab==1" class="mT15">
				<view class="pjTop flex alg-center jst-between">
					<view class="flex alg-center">
						<view class="u-yellow font24">{{pjInfo?.source}}</view>
						<view class="mL5">
							<view class="flex">
								<image class="imgW24" :key="i" v-for="(item,i) in pjInfo?.startCount"
									:src="resources.star" mode=""></image>
							</view>
							<view class="font15 mT10">{{pjInfo?.count}} 条评价</view>
						</view>
					</view>
					<view>
						<view class="flex alg-center font13">
							<text class="mR5">好评</text>
							<view style="width: 160rpx;"><u-line-progress :show-percent="false" :height="16"
									:percent="xf.getPer(pjInfo?.satisfaction3)" :inactive-color="'#F0F0F0'"
									:active-color="'#FF9C00'"></u-line-progress></view>
							<text class="mL5">{{pjInfo?.satisfaction3}}</text>
						</view>
						<view class="flex alg-center font13 mT10">
							<text class="mR5">中评</text>
							<view style="width: 160rpx;"><u-line-progress :show-percent="false" :height="16"
									:percent="xf.getPer(pjInfo?.satisfaction2)" :inactive-color="'#F0F0F0'"
									:active-color="'#FF9C00'"></u-line-progress></view>
							<text class="mL5">{{pjInfo?.satisfaction2}}</text>
						</view>
						<view class="flex alg-center font13 mT10">
							<text class="mR5">差评</text>
							<view style="width: 160rpx;"><u-line-progress :show-percent="false" :height="16"
									:percent="xf.getPer(pjInfo?.satisfaction)" :inactive-color="'#F0F0F0'"
									:active-color="'#FF9C00'"></u-line-progress></view>
							<text class="mL5">{{pjInfo?.satisfaction}}</text>
						</view>
					</view>
				</view>
				<view class="flex flex-wrap mT10">
					<view @click="changePjTab(item,i)" :class="checkPjTab==i?'active':''" class="pjTabItem font14"
						v-for="(item,i) in pjTab" :key="i">
						<text>{{item.text}}</text>
						<text class="u-9">{{item.count}}</text>
					</view>
				</view>
				<view class="mT15 bgf radius20 pL12 pR12 pB25">
					<block v-if="pjLis.length>0">
						<view class="pjItem flex pT15 pB15" v-for="(item,i) in pjLis" :key="i">
							<u-image v-if="item.comOrUserProfile" :borderRadius="20" :width="80" :height="80"
								class="pjHeader" :src="xf.getImgUrl(item.comOrUserProfile)" mode=""></u-image>
							<u-image v-else :width="80" :height="80" class="pjHeader" :src="resources.defaultHeader"
								mode=""></u-image>

							<view class="pjItemRight mL10">
								<view class="flex alg-center jst-between">
									<view class="font15 bold">{{item.izAnonymous==1?'匿名用户':item.evaluatorName}}</view>
									<view class="font12 u-9">
										{{item.evaluationTime}}
									</view>
								</view>
								<view class="flex mT5 alg-center">
									<image v-for="(v,z) in xf.getMathCeil(item.evaluationScore)" :key="z" class="w24"
										:src="resources.star" mode=""></image>
									<text class="mL5 font12 u-org bold">{{item.evaluationScore}}</text>
								</view>
								<view class="font15 line24 mT10">
									{{item.evaluationConent}}
								</view>
								<view v-if="item.evaluationImage" class="flex flex-wrap mT10">
									<u-image class="mR10 mB10" :width="160" :height="160" :borderRadius="20"
										@click="xf.previewImg([xf.getImgUrl(v)])"
										v-for="(v,j) in xf.getArr(item?.evaluationImage)" :key="j"
										:src="xf.getImgUrl(v)" mode=""></u-image>


								</view>
							</view>
						</view>
						<view class="flex mT10 jst-center pointer morePj alg-center" v-if="pjInfo?.count>5"
							@click="xf.onlineUtils.route(`/pages/common/moreComment/index?id=${id}`)">
							<view class="relative flex alg-center morePjHeaderBox">
								<image class="morePjHeader" :src="resources.userHead1" mode=""></image>
								<image class="morePjHeader" :src="resources.userHead2" mode=""></image>
								<image class="morePjHeader" :src="resources.userHead3" mode=""></image>
							</view>
							<text class="u-9 font13 mL5">查看更多评价</text>
						</view>

					</block>
					<block v-else>
						<view class="pT15">
							<xfNoData :paddingTop="0"></xfNoData>
						</view>
					</block>
				</view>

			</view>

			<!-- 企业评价结束 -->
			<!-- 企业在找灵工 -->
			<view v-show="currentTab==2" class="mT15 detailJobBox">
				<block v-if="list.length>0">
					<jobItem :list="list"></jobItem>
					<view class="flex mT10 jst-center pointer morePj alg-center bg-gray" v-if="jobTotal>5"
						@click="xf.onlineUtils.route(`/pages/common/moreJob/index?id=${id}&isPerson=${isPerson}`)">

						<text class="u-9 font13 mL5">查看更多灵工</text>
					</view>
				</block>
				<block v-else>
					<view class="pT15">
						<xfNoData :paddingTop="0" :backgroundColor="'transparent'" :text="'暂无再招灵工'"></xfNoData>
					</view>
				</block>
			</view>
			<!-- 企业在找灵工结束 -->
		</view>

		<xfTipModal ref="tipModal"></xfTipModal>
	</view>
</template>

<script>
	import jobItem from "@/components/job/jobCard/index.vue"
	import {
		getCompanyInfo,
		getPersonInfo,
		getCompanyLis,
		getPerSonLis,
		commentTop,
		commentLisTab
	} from "@/api/userInterface/job.js"
	import {
		getLocal
	} from "@/libs/map.js"
	import {
		getPhoneAuth
	} from "@/api/common.js"
	import { getPhone } from "@/api/userInterface/job"


	export default {
		components: {
			jobItem
		},
		data() {
			return {
				checkPjTab: 0,
				loading: false,
				currentTab: 0,
				isPerson: null,
				info: null,
				list: [],
				id: '',
				showMapTip: true,
				query: {
					latitude: null,
					longitude: null,
					companyId: null
				},
				showMap: true,
				pjInfo: {},
				pjLis: [],
				jobTotal: 0,
				pjTab: [{
					value: '',
					text: "全部",
					count: 0
				}],
				tabLis: [{
						name: '基本信息'
					},
					{
						name: '评价'
					},
					{
						name: '在招灵工',
						count: 0
					}
				]
			};
		},
		onShow() {
			this.showMapTip = true;
		},
		onLoad(e) {
			this.isPerson = e.isPerson;
			this.query.companyId = e.id;
			uni.setNavigationBarTitle({
				title: e.isPerson == 1 ? '企业信息' : '个人信息'
			})

			if (this.isPerson == 1) {
				//获取企业信息
				this.getCompanyInfoOpt(e.id)
				this.getCompanyJob(e.id)

			} else {
				//获取个人信息
				this.getPersonInfoOpt(e.id)
				this.getPersonJob(e.id)
			}
			this.id = e.id;
			this.getTpjTop(e.id)
			this.getPjLis(this.id)
		},
		onUnload() {
			let isPay = uni.getStorageSync('isPay')
			if (isPay && isPay == 1) {
				uni.setStorageSync('isPay', '')
			}
		},
		methods: {

			phoneLink() {
				let that = this;
				this.showMapTip = false;
				if (this.xf.isLogin()) {
					let authStatus = uni.getStorageSync('authStatus')
					let id = that.info.id;
					if (authStatus && authStatus != 0) {
						getPhone({
							acquirerId: id
						}).then(res => {
							const {result} = res
							if (result.code && result.code == 201){
								let htmlStr = `<p class="mT10">拨打电话需支付<span class="u-red">2元</span></p>`
								this.$refs.tipModal.open({
									slotHtml: htmlStr,
									btnText: "拨打",
									showCancel: true,
									close() {
										that.showMapTip = true;
									},
									success: function() {
										that.xf.jumpPayPage(`acquirerId=${that.info.id}`)
									}
								})
							} else {
								this.$refs.tipModal.open({
									content: "确认拨打电话吗？",
									btnText: "拨打",
									showCancel: true,
									success: function() {
										that.xf.callPhone({
											acquirerId: id
										})
									}
								})
							}	
						})
					} else {
						this.$refs.tipModal.open({
							content: "您还未进实名认证，请先实名认证？",
							btnText: "去认证",
							showCancel: true,
							close() {
								that.showMapTip = true;
							},
							success: function() {
								uni.navigateTo({
									url: "/pages/userPage/subpackge/my/smrz/smrz"
								})
							}
						})
					}
				} else {
					this.$refs.tipModal.open({
						content: "您还未登录,请先登录",
						btnText: "去登录",
						showCancel: true,
						close() {
							that.showMapTip = true;
						},
						success: function() {
							that.xf.fungoPreviousPage()
							uni.navigateTo({
								url: "/pages/login/login"
							})
						}
					})
				}

			},

			// callNumber() {
			// 	let id = this.info.id;
			// 	this.xf.callPhone({
			// 		acquirerId: id

			// 	})
			// },
			// callPhone() {
			// 	let that = this;
			// 	this.$refs.tipModal.open({
			// 		content: "确认拨打电话吗？",
			// 		btnText: "拨打",
			// 		showCancel: true,
			// 		success: function() {
			// 			that.callNumber()
			// 		}
			// 	})
			// },
			openMap() {
				uni.openLocation({
					latitude: this.info?.comLatitude,
					longitude: this.info?.comLongitude,
					name: this.info?.comName,
					address: this.info?.comBelongAddress,
					success: function() {
						console.log('success');
					},
					fail(res) {
						console.log(res)
					}
				});
			},
			getTpjTop(id) {
				commentTop({
					xfOddGeneralId: id
				}).then(async res => {
					this.pjInfo = res.result;
					this.pjInfo.startCount = res.result.source && Math.ceil(res.result.source)
					let d = await this.baseStore.getDictionaryDataAll('jjp_oddjob_often');
					d.map(v => {
						let count = this.pjInfo.commonList["" + v.value + ""];
						if (count) {
							this.pjTab.push({
								...v,
								count: count
							})
						}
					})

				})
			},
			//获取企业信息
			async getCompanyInfoOpt(id) {
				const {
					lat,
					lon
				} = await this.xf.getLatOrLon();

				getCompanyInfo({
					companyId: id,
					longitude: lon,
					latitude: lat
				}).then(res => {
					this.info = res.result;
					this.tabLis[2].count = res.result.recruitingNum
				})
			},
			getPjLis(id) {

				commentLisTab({
					xfOddGeneralId: this.id,
					evaluationCommonSentences: this.checkecdLis,
					pageSize: 5,
					pageNo: 1
				}).then(res => {
					this.pjLis = res.result.records;
					this.pjTab[0].count = res.result.total;

				}).catch(err => {

				})
			},
			async getPersonJob(id) {
				const {
					lat,
					lon
				} = await this.xf.getLatOrLon();

				getPerSonLis({
					pageSize: 5,
					pageNo: 1,
					xfOddUserId: id,
					longitude: lon,
					latitude: lat
				}).then(res => {
					this.list = res.result.records;
					this.jobTotal = res.result.total;
				})
			},
			async getCompanyJob(id) {
				const {
					lat,
					lon
				} = await this.xf.getLatOrLon();

				getCompanyLis({
					pageSize: 5,
					pageNo: 1,
					comId: id,
					longitude: lon,
					latitude: lat
				}).then(res => {
					this.list = res.result.records;
					this.jobTotal = res.result.total;
				})
			},
			//获取个人信息
			async getPersonInfoOpt(id) {
				const {
					lat,
					lon
				} = await this.xf.getLatOrLon();
				getPersonInfo({
					xfOddUserId: id,
					longitude: lon,
					latitude: lat
				}).then(res => {
					this.info = res.result;
					this.tabLis[2].count = res.result.recruitingNum
				})
			},
			//获取电话权限
			getPhoneOpt() {
				let id = this.info.id;
				this.xf.callPhone({
					acquirerId: id,
					details: 10
				})
			},
			//切换企业信息
			changeTab(e) {
				console.log(e)
				this.currentTab = e;
			},
			//切换企业评价
			changePjTab(v, i) {
				this.checkPjTab = i;
				this.checkecdLis = v.value ? [v.value] : [];
				this.getPjLis()
			}

		}
	};
</script>
<style lang="scss">
	page {
		min-height: 100%;
		background: linear-gradient(0deg, #F7F8FB, #E1EEFF);
		/* #ifdef MP-COMPANY */
		background: linear-gradient(0deg, #F8FAFF, #EBF0FF);
		/* #endif */
		/* #ifdef MP-ECONOMIC  */
		background: linear-gradient(0deg, #F8FAFF, #EBFCFF);
		/* #endif */
	}
</style>
<style scoped lang="scss">
	.morePjHeaderBox {
		width: 100rpx;
	}

	.imgFm {
		width: 160rpx;
		height: 160rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		margin-right: 20rpx;
	}

	.personOrcompanyDetail {
		min-height: 100%;
		// background: linear-gradient(0deg, #F7F8FB, #E1EEFF);
		padding-bottom: 60rpx;
	}

	.morePjHeader {
		width: 48rpx;
		height: 48rpx;
		position: absolute;

		&:nth-child(2) {
			left: 24rpx;
		}

		&:nth-child(3) {
			left: 48rpx;
		}
	}

	.morePj {

		height: 80rpx;
		background: #F7FBFF;
		border-radius: 10rpx;
	}

	.pjItem {
		border-bottom: 2rpx solid #F6F6F6;

		.pjItemRight {
			width: calc(100% - 100rpx);
		}
	}

	.pjHeader {
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
	}

	.jobCard {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.imgMapBg {


		max-width: 300rpx;
		width: auto;
		padding-bottom: 30rpx;
		// height: 100rpx;
		// line-height: 80rpx;
		font-weight: bold;
		position: relative;
		top: 60%;
		left: 50%;
		transform: translate(-50%, calc(-50% - 60rpx));
		z-index: 10;

		.arrowDown {
			border-radius: 20rpx;
			background: #fff;
			padding: 20rpx 20rpx;

			&:after {
				position: absolute;
				bottom: 8rpx;
				content: "";
				width: 0;
				height: 0;
				border-left: 12rpx solid transparent;
				border-right: 12rpx solid transparent;
				border-top: 24rpx solid #fff;
				/* 你可以根据需要更改颜色和大小 */
			}
		}

	}

	.pjTabItem {
		line-height: 68rpx;
		padding: 0 20rpx;
		height: 68rpx;
		background: #fff;
		border-radius: 16rpx;
		margin-right: 20rpx;
		min-width: 160rpx;
		text-align: center;
		margin-bottom: 20rpx;
		border: 2rpx solid #fff;

		.u-9 {
			padding-left: 4rpx;
		}

		&.active {
			border: 2rpx solid #3291F8;
			color: #3291F8;

			.u-9 {
				color: #3291F8;
			}
		}
	}

	.pjTop {

		padding: 30rpx;
		background: #F7FBFF;
		border-radius: 20rpx;
		border: 3px solid #FFFFFF;
	}

	.map {
		width: 100%;
		height: 242rpx;
	}

	.companyPic {
		width: 202rpx;
		height: 202rpx;
		margin-right: 20rpx;

		&:nth-child(3) {
			margin-right: 0;
		}

		margin-bottom: 20rpx;
	}

	#scroll-view-h {
		padding-bottom: 60rpx;
	}

	.posImg {
		width: 24rpx;
		height: 28rpx;
	}

	.topInfo {
		background: #F7FBFF;
		padding: 30rpx;
		border-radius: 10rpx;
	}

	.bgImg {
		position: fixed;
		width: 100%;
		z-index: 0;
		top: 0;
		/* #ifdef MP-WEIXIN */
		top: 100rpx;
		/* #endif */
	}

	.headerImg {
		width: 130rpx;
		height: 130rpx;
		border-radius: 20rpx;
		margin-top: -80rpx;
		position: relative;
		background: #fff !important;
	}

	.topCompany {
		// background-image: url('~@/static/image/userImg/companyBg.png');
		background-size: 100% 100% !important;
	}

	.callBox {
		background: #EAF4FE;
		border-radius: 27rpx;
		height: 54rpx;
		padding: 0 20rpx;

		.callPhoneImg {
			width: 28rpx;
			height: 28rpx;
		}
	}
</style>